<!--医院端--订单跟踪--批发采购订单列表--详情 -->
<template>
  <div class="auth-product">
    <el-container class="details-box">
      <!-- 列表 -->
      <el-header height="auto">
        <div class="formToptext">
          <el-form
            :inline="true"
            :model="formdata"
            ref="ruleForm"
            label-width="150px"
          >
            <el-form-item
              v-for="(item, index) in detailsDetailForm"
              :key="index"
              :label="item.title"
            >
              <div
                v-if="item.key === 'orderStatus'"
                class="textBox">
                ：{{ statusArr[Number(formdata[item.key])] }}
              </div>
              <div
                v-else-if="item.key === 'province'"
                class="textBox">
                : {{ formdata.province }}
                {{ formdata.city === formdata.province ? '' : formdata.city }}
                {{ formdata.area }}
                {{ formdata.detailedAddress }}
              </div>
              <div
                v-else
                class="textBox">：{{ formdata[item.key] }}</div>
            </el-form-item>
          </el-form>
        </div>
      </el-header>
      <!-- 列表模块 -->
      <el-editable
        class="hospital-edit-box"
        :data="getList"
        height="auto"
        v-loading="tableLoading"
        :columns="detailsTableData"
      >
        <template
          slot="default-purchaseNum"
          slot-scope="scope">
          {{ scope.row.purchaseNum }}/{{ scope.row.minUnit }}
        </template>
        <template
          slot-scope="scope"
          slot="default-category">
          {{ category[scope.row.category] }}
        </template>
      </el-editable>
      <!-- 分页模块 -->
      <el-pagination
        class="pagination"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="curPage"
        :page-sizes="PAGE_NUMBER"
        :page-size="pageSize"
        :layout="PAGINATION_LAYOUT"
        :total="totalElements"
      />

    </el-container>
  </div>
</template>

<script>
import {
  detailsTableData,
  detailsDetailForm,
  statusArr,
  cardConfirmedColumns,
  dialogColumns,
  dialogdetails,
  cardSonConfirmedColumns,
  ReceivingTitle
} from './const'
import { attrItemList } from '@const/orderCenterApi'
import SearchForm from '@components/businesscomponents/search'
import {
  attrHospitalNeedOrder,
  attrHospitalNeedOrderItem,
  attrGerUserById
} from '@const/beforeSettleApi'

import { hasIn, chunk } from 'lodash'
import { PAGE_NUMBER, PAGINATION_LAYOUT } from '@const/common'

import ElEditable from '@components/el-editable'

export default {
  components: { ElEditable, SearchForm },
  data () {
    return {
      ReceivingTitle,
      cardSonConfirmedColumns,
      rowTitle: 'distributorList',
      dialogColumns,
      dialogdetails,
      cardConfirmedColumns,
      dialogDefaultUrl: {
        url: ``,
        method: '',
        params: {}
      },
      // 订单状态
      statusArr,
      // 表格Loading
      tableLoading: false,
      // 表头
      detailsTableData,
      // 表格数据
      getList: [],
      // 表单编辑默认值
      formdata: {},
      // 表单 详情展示内容-table
      detailsDetailForm,
      // 详情ID
      detailsId: this.$route.query.id,
      // 产品大类
      category: {
        1: '高值',
        2: '低值',
        3: '试剂',
        4: '设备',
        5: '器械'
      },

      orderStatus: {
        // 订单状态
        1: '待确认',
        2: '待验收',
        3: '部分收货',
        4: '已完成',
        5: '待术后还回',
        6: '已取消',
        7: '已删除',
        8: '待质检',
        9: '待收货'
      },
      deliveryDetailList: [],
      baseInfo: [],
      curPage: 1, // 当前页
      PAGE_NUMBER, // 页码数组
      PAGINATION_LAYOUT, // 页码功能布局
      pageSize: PAGE_NUMBER[0], // 一页的数量
      totalElements: 0 // 总共的条数
    }
  },
  computed: {
    isShowDeliverList () {
      const status = this.$route.query.status
      return (
        Number(status) === 3 || Number(status) === 4 || Number(status) === 5
      )
    }
  },
  mounted () {
    let arr = [{ type: 'button', val: '返回', handle: this.back }]
    const btn = {
      type: 'btn',
      arr: arr
    }
    this.$store.commit('changeLayoutHandle', btn)
    this.getProductInfo()
    this.list()
    // this.getDeliveryDetailList()
  },
  methods: {
    getDeliveryDetailList () {
      // type 标识订单来源，1.批发2.寄售3.跟台
      this.$axios
        .get(`${attrItemList}?id=${this.$route.query.id}&type=2`)
        .then(({ data }) => {
          if (Number(data.code) !== 0) return
          this.deliveryDetailList = data.payload
          console.log(this.deliveryDetailList)
          this.baseInfo = this.deliveryDetailList.map(item => {
            return {
              receiveCode: item.receiveCode,
              createdAt: item.createdAt,
              purchaseNumCount: item.purchaseNumCount,
              receiveNumCount: item.receiveNumCount
            }
          })
        })
        .catch(e => {})
        .finally(() => {
        })
    },
    // 点击返回
    back () {
      this.$router.go(-1)
    },

    // 根据地址ID获取联系人
    getUserById () {
      this.$axios({
        method: 'post',
        url: attrGerUserById,
        // url: 'http://47.110.130.245:3000/mock/355/guoke-deepexi-storage-center/api/v1/storage/address/getByBsAddress',
        params: {
          id: this.formdata.receiveAddressId
          // id: 14
        }
      }).then(res => {
        console.log(res, '22')
        let result = hasIn(res, ['data', 'payload']) ? res.data.payload : {}
        this.formdata = Object.assign(this.formdata, result)
        this.$forceUpdate()
      })
    },

    // 获取产品基本数据
    getProductInfo () {
      this.$axios({
        method: 'post',
        url: attrHospitalNeedOrder,
        data: {
          id: this.$route.query.id
        }
      }).then(res => {
        let result = hasIn(res, ['data', 'payload'])
          ? res.data.payload.content
          : []
        this.formdata = result[0]
        this.getUserById()
      })
    },

    // 获取产品列表
    list () {
      // Loading加载开始
      // 请求列表数据
      this.$axios({
        method: 'post',
        url: attrHospitalNeedOrderItem,
        // url: 'http://47.110.130.245:3000/mock/155/guoke-deepexi-order-center/api/v1/hospital/needOrderItem',
        data: {
          id: this.$route.query.id,
          page: this.curPage,
          pageSize: this.pageSize
        }
      }).then(res => {
        let result = hasIn(res, ['data', 'payload'])
          ? res.data.payload.content
          : []
        this.getList = result.map(item => {
          return item
        })
        this.totalElements = res.data.payload.totalElements
      })
    },

    // 页码更改
    handleSizeChange (size) {
      this.pageSize = size
      this.curPage = 1
      let attr = chunk(this.getList, this.pageSize)
      this.getList = attr[0]
      this.list()
    },

    // 切换不一样的页面,重置一切数据
    handleCurrentChange (curPage) {
      this.curPage = curPage
      this.getList = this.getList[this.curPage - 1]
      this.list()
    }
  }
}
</script>

<style lang="less">
.details-box {
  height: 100%;
  overflow: auto;

  .addbutton {
    border: none;
    background: none;
    color: rgba(35, 113, 197, 1);
  }

  .submission {
    background: rgba(35, 113, 197, 1);
    border: 0;
    color: #fff;
    margin-bottom: 10px;
  }

  .topInput {
    width: 211px;
  }

  .pagination {
    padding-top: 10px;
    display: flex;
    justify-content: flex-end;
    padding-right: 0;
  }

  .formToptext {
    margin-bottom: 20px;

    .el-form-item {
      margin-right: 16px;

      .textBox {
        width: 220px;
      }
    }

    .el-form-item__label {
      padding-right: 10px;
    }
  }
}
</style>
